<template>
  <div class="container">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="pageGrid.name" placeholder="内部订单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="pageGrid.mobile" placeholder="员工"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="pageGrid.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="pageGrid.value" placeholder="请选择">
          <el-option label="抛光"></el-option>
          <el-option label="打磨"></el-option>
          <el-option label="焗油"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">搜索</el-button>
        <el-button @click="clearSearch">重置</el-button>
        <el-button
          @click="exportList"
          :loading="isExport"
          type="primary"
          icon="el-icon-files"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-table v-loading="isLoading" :data="tableData" border class="table" ref="multipleTable">
      <el-table-column prop="name" label="订单号" align="center"></el-table-column>
      <el-table-column prop="mobile" label="规格" align="center"></el-table-column>
      <el-table-column prop="procedure" label="数量" align="center"></el-table-column>
      <el-table-column prop="dept" label="开始时间" align="center"></el-table-column>
      <el-table-column prop="dept" label="结束时间" align="center"></el-table-column>
      <el-table-column prop="number" label="工号" align="center"></el-table-column>
      <el-table-column prop="number" label="工作时间" align="center"></el-table-column>
      <el-table-column prop="number" label="员工" align="center"></el-table-column>
      <el-table-column prop="number" label="工艺" align="center"></el-table-column>
      <el-table-column prop="number" label="状态" align="center"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageGrid.pageNo"
          :page-sizes="pageSizeArr"
          :page-size="pageGrid.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import api from '../../../api';
  import commonInfo from '@/utils/common'
  import host from '@/utils/host';

  export default {
    data() {
      return {
        pageSizeArr: commonInfo.pageSizeArr,
        isLoading: false,
        tableData: [],
        total: 0,
        pageGrid: {
          pageNo: 1,
          pageSize: 10,
          name: null,
          mobile: null,
          number: null,
        },
        isExport: false,
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.isLoading = true
        api.getStaffPage(this.pageGrid).then(res => {
          console.log(res);
          // if (res.code === 200) {
          //   this.tableData = res.rows
          //   this.total = res.total
          //   this.isLoading = false
          // }
        }).catch(
          this.isLoading = false
        )
      },
      exportList() {
        this.isExport = true;
        api
          .excelActivityInvitationShop(this.pageGrid.parameter)
          .then((res) => {
            jsfiledownload(res, `${new Date().getTime()}.xlsx`);
            this.isExport = false;
          })
          .catch(() => {
            this.isExport = false;
          });
      },
      clearSearch() {
        this.pageGrid = {
          pageNo: 1,
          pageSize: 10,
          parameter: {
            channel: null,
            state: null,
            mobile: null,
            rbtStatus: null
          }
        }
        this.getData()
      },
      //分页
      handleCurrentChange(val) {
        this.pageGrid.pageNo = val;
        this.getData();
      },
      //分页
      handleSizeChange(val) {
        this.pageGrid.pageSize = val;
        this.getData();
      }
    }
  }
</script>

<style scoped lang="less">

</style>
